<!-- 会员详情 -->
<template>
  <div>
    <HeaderBox :imageUrl="detailInfo.memberLogo || detailInfo.leadingAvatar" :items="headerItems">
      <div slot="user">
        <span>{{ detailInfo.memberName }}</span>
        <a-tag color="#f50" class="_ml-10">{{ detailInfo.levelName }}</a-tag>
      </div>
      <div slot="leader" class="disFlxAC">
        <span>负责人：</span>
        <span>
          <span>{{ detailInfo.leadingName }}</span>
        </span>
        <span class="_ml-20 disFlxAC">
          <a-icon type="phone" />
          <span class="_ml-5">{{ detailInfo.leadingPhone }}</span>
        </span>
      </div>
      <div slot="time" class="disFlxAC">
        <span>
          <span>加入时间：</span>
          <span>{{ detailInfo.joinTime }}</span>
        </span>
        <span class="_ml-20 _mr-10">
          <span>到期时间：</span>
          <span>{{ detailInfo.memberEndTime }}</span>
        </span>
        <DictTag
          v-if="detailInfo.applyType === applyTypeEnum.UNIT"
          :options="Dict.getLocal('paymentStatusDict')"
          :value="detailInfo.paymentStatus"
        />
      </div>
      <div slot="label">
        <span>负责人标签：</span>
        <a-tag v-for="(item, index) in detailInfo.labelDtoList" color="cyan" :key="index">{{ item.labelName }}</a-tag>
      </div>

      <div slot="action" style="flex-shrink: 0">
        <div class="disFlxAC flexEnd">
          <span class="_mr-10">单位在小程序列表展示</span>
          <a-switch
            :checked="detailInfo.companyShow === 1"
            @change="onChangeStatus(detailInfo.memberId, detailInfo.companyShow === 1 ? 0 : 1, 'companyShow')"
          />
        </div>
        <div class="disFlxAC flexEnd _mt-20">
          <span class="_mr-10">负责人在小程序列表展示</span>
          <a-switch
            :checked="detailInfo.leadingShow === 1"
            @change="onChangeStatus(detailInfo.leadingId, detailInfo.leadingShow === 1 ? 0 : 1, 'leadingShow')"
          />
        </div>
      </div>
      <template slot="buttons">
        <Buttons :detailInfo="detailInfo" />
      </template>
    </HeaderBox>

    <a-card
      :tab-list="tabList"
      :active-tab-key="titleKey"
      :bordered="false"
      class="br-10 _mt-20"
      @tabChange="(key) => onTabChange(key)"
    >
      <div v-show="titleKey === 'information'">
        <Information />
      </div>
      <div v-if="titleKey === 'leader'">
        <Leader :applyType="detailInfo.applyType" />
      </div>
      <div v-else-if="titleKey === 'paymentRecord'">
        <PaymentRecord :id="id" />
      </div>
      <div v-else-if="titleKey === 'annex'">
        <Annex />
      </div>
      <!-- <div v-else-if="titleKey === 'relevancyForm'">
        <RelevancyForm />
      </div> -->
    </a-card>
  </div>
</template>

<script>
import HeaderBox from '@/components/DetailHeaderBox'
import Buttons from './components/Buttons.vue'
import Information from './components/information.vue'
import Leader from '../components/leader.vue'
import Annex from '../components/annex.vue'
import PaymentRecord from '@/views/member/paymentManage/paymenRecord.vue'
import { MemberSettingInfo } from '@/api/member/member'
import { MemberCompanyShow, MemberLeadingShow } from '@/api/system/system'
import { applyTypeEnum } from '@/enums/member'
import DictTag from '@/components/DictTag'
import RelevancyForm from './components/relevancyForm.vue'

export default {
  components: {
    HeaderBox,
    Buttons,
    Information,
    Leader,
    PaymentRecord,
    Annex,
    DictTag,
    RelevancyForm
  },
  data() {
    return {
      id: undefined,
      headerItems: [],
      tabList: [
        {
          key: 'information',
          tab: '入会资料',
        },
        {
          key: 'leader',
          tab: '成员列表',
        },
        {
          key: 'paymentRecord',
          tab: '缴费记录',
        },
        {
          key: 'annex',
          tab: '附件管理',
        },
        // {
        //   key: 'relevancyForm',
        //   tab: '关联表单',
        // },
      ],
      titleKey: 'information',
      detailInfo: {},
      applyTypeEnum,
    }
  },
  computed: {},
  watch: {},
  methods: {
    onTabChange(key) {
      this.titleKey = key
    },
    async getMemberInfo() {
      let res = await MemberSettingInfo(this.id)
      let data = res.data || {}
      this.detailInfo = data

      this.headerItems = [
        { slot: 'user' },
        { label: '联系方式', value: data.leadingPhone },
        { slot: 'time' },
        { slot: 'label' },
        { label: '服务专员', value: data.attacheName },
      ]

      if (data.applyType === applyTypeEnum.UNIT) {
        this.headerItems = [
          { slot: 'user' },
          { slot: 'leader' },
          { slot: 'time' },
          { slot: 'label' },
          { label: '服务专员', value: data.attacheName },
        ]
      }
    },
    async onChangeStatus(id, status, type) {
      var params = {
        id,
        status,
      }
      let res = {}
      if (type === 'companyShow') res = await MemberCompanyShow(params)
      else if (type === 'leadingShow') res = await MemberLeadingShow(params)
      let { code, msg } = res
      this.$message[code === 0 ? 'success' : 'error'](msg)
      this.detailInfo[type] = status
    },
    handleSet() {},
  },
  created() {
    this.id = this.$route.query.id
    this.titleKey = this.$route.query.type || 'information'
    this.getMemberInfo()
  },
  mounted() {},
  provide() {
    return {
      GetMemberInfo: this.getMemberInfo,
    }
  },
}
</script>
<style scoped lang="less">
</style>